feat: show inline span durations in trace timeline#1886
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: ff624d1 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
PR Review
✅ Otherwise clean: good test coverage for the new |
E2E Test Results✅ All tests passed • 89 passed • 3 skipped • 978s
Tests ran across 4 shards in parallel. |
98f711e to
e44215d
Compare
e44215d to
2290d75
Compare
## Summary Adds duration labels next to each **span** bar in the trace waterfall timeline so users can read the duration at a glance without hovering the tooltip. ## Changes ### Timeline chart - **TimelineChartRowEvents** - Renders a duration label (e.g. `12ms`, `1.2s`) **outside** each bar using `position: absolute`, so it doesn’t affect layout. - **Placement:** Label is on the **right** of the bar when most of the bar is before the timeline midpoint, and on the **left** when most of the bar is past the midpoint (based on bar center vs. `maxVal / 2`), to keep it in the emptier side. - Uses existing `renderMs()` from `TimelineChart/utils` for formatting. - Wraps each bar in a container with `overflow: visible` so the duration label is not clipped by the bar’s `text-truncate` (overflow hidden). - **TTimelineEvent** now supports optional `showDuration?: boolean`. When `false`, the duration label is hidden (default is to show). ### DBTraceWaterfallChart - When building timeline events, sets `showDuration: type !== SourceKind.Log` so **log** rows do not show a duration (only spans do). ## Screenshots <img width="1293" height="1187" alt="Screenshot 2026-03-11 at 18 36 34" src="https://github.com/user-attachments/assets/da04c317-a0bd-45d7-b0cc-f298564fb850" /> ## Testing - Open a trace with multiple spans and at least one correlated log; confirm duration appears beside span bars (left or right by midpoint) and does not appear beside log rows. ### References - Closes HDX-3671
Summary
Adds duration labels next to each span bar in the trace waterfall timeline so users can read the duration at a glance without hovering the tooltip.
Changes
Timeline chart
12ms,1.2s) outside each bar usingposition: absolute, so it doesn’t affect layout.maxVal / 2), to keep it in the emptier side.renderMs()fromTimelineChart/utilsfor formatting.overflow: visibleso the duration label is not clipped by the bar’stext-truncate(overflow hidden).showDuration?: boolean. Whenfalse, the duration label is hidden (default is to show).DBTraceWaterfallChart
showDuration: type !== SourceKind.Logso log rows do not show a duration (only spans do).Screenshots
Testing
References